<template>
      <div class="business-area">
            <Header :isTransparentBackground="false"></Header>
            <div class="pt-gap-comm business-main-box">
                  <!-- banner 及 辅助导航栏 开始 -->
                  <PageBanner pictureLink="https://www.tencent.com/img/banners/business-1.jpg" :dataIndex="1"
                        major-heading="连接生态" auxiliary-title="从连接人、服务及设备，到连接企业及未来科技，形成共赢的产业生态"></PageBanner>
                  <!-- banner 及 辅助导航栏 结束 -->

                  <template v-for="(businessItem, businessIndex) in headerList[1].subList" :key="businessIndex">
                        <component :id="businessItem.anchor_point" :is="data.componentList[businessIndex].componentName" 
                        :moduleTitle="businessItem.sub_text" />
                  </template>
            </div>
            <CopyRight></CopyRight>
      </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { headerList } from '@/config/assets.config'
// 导航栏组件
import Header from '@/components/client/common/header/index.vue';
// 版权组件
import CopyRight from '@/components/client/common/copyright/index.vue';

import PageBanner from '@/components/client/common/pageBanner/index.vue'

import UserOriented from '@/components/client/business/userOriented.vue'
import ForEnterprises from '@/components/client/business/forEnterprises.vue'
import TechnologicalInnovation from '@/components/client/business/technologicalInnovation.vue'

let data = reactive({
      // 组件 List
      componentList: [
            { componentName: UserOriented}, 
            { componentName: ForEnterprises }, 
            { componentName: TechnologicalInnovation }
      ]
})

</script>